<template>
	<scroll-view scroll-y="true" class="page n-s-b">
		<view class="login-clue fillx fccc" @click="goLogin" v-if="!token">
			<text>未登录</text>
			<text>请点击</text>
		</view>
		<view class="login-clue-placeholder fillx" v-else></view>
		<view class="property fillx frsc">
			<view class="property-total hf fccc">
				总资产(元)
				<text class="property-total-number">{{token?8888:'***'}}</text>
			</view>
			<view class="property-income hf fccc">
				昨日经销收入(元)
				<text class="property-total-number">{{token?1212:'***'}}</text>
			</view>
		</view>
		<view class="performance fillx">
			<view class="performance-title fillx">
				业绩展示
			</view>
			<view class="performance-content fillx">
				<swiper :display-multiple-items="3" style="height:70px;"  @change="changeSwiperCurrent">
					<swiper-item v-for="item in performanceList" :key="item.name">
						<view class="performance-content-swiper-item fillxy fccc">
							<text>当月{{item.name}}</text>
							<text>{{item.count}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<view class="people-count fillx">
			<view class="people-count-title fillx">
				市场人数统计
			</view>
			<view class="people-count-cotent fillx frss fw">
				<view class="people-count-cotent-item ha frsc" v-for="item in peopleCountArr" :key="item.name">
					<image class="people-count-cotent-item-img" src="../../../static/logo.png" mode="widthFix"></image>
					<view class="people-count-cotent-item-detail fillxy fccc">
						<text>{{item.name}}</text>
						<text class="mr">{{item.count}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="order-total fillx">
			<view class="order-total-title fillx">
				市场订单统计
			</view>
			<u-collapse :head-style="{'border-top':'2rpx solid #dddddd'}">
				<u-collapse-item :title="'•'+obj.date" v-for="obj in orderListTotal" :key="obj.date" :open="orderListTotal.indexOf(obj)===0">
					<!-- <view class="order-total-content-item-title fillx">
						•{{obj.date}}
					</view> -->
					<view class="order-total-content-item-content fillx frcc fw" v-for="item in obj.showList" :key="obj.date+item.name">
						<view class="order-total-content-item-content-left ha frcc">
							{{item.name}}
						</view>
						<view class="order-total-content-item-content-right ha frcc mr">
							{{item.count}}
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
			<!-- <view class="order-total-content fillx">
				<view class="order-total-content-item fillx" v-for="obj in orderListTotal" :key="obj.date">
					<view class="order-total-content-item-title fillx">
						•{{obj.date}}
					</view>
					<view class="order-total-content-item-content fillx frcc fw" v-for="item in obj.showList" :key="obj.date+item.name">
						<view class="order-total-content-item-content-left ha frcc">
							{{item.name}}
						</view>
						<view class="order-total-content-item-content-right ha frcc mr">
							{{item.count}}
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="performance-balance fillx frcc bsp10 t-bb-u" @click="goPage('/pages/myPlace/awrad/awrad')">
			市场奖励与补贴管理
			<!-- <image class="performance-balance-img" src="../../../static/arrow.svg" mode="widthFix"></image> -->
			<view class="iconfont icon-arrow-right"></view>
		</view>
		<view class="market-manage fillx frcc bsp10 t-bb-u" @click="goPage('/pages/myPlace/market/market')">
			市场管理
			<!-- <image class="market-manage-img" src="../../../static/arrow.svg" mode="widthFix"></image> -->
			<view class="iconfont icon-arrow-right"></view>
		</view>
	</scroll-view>
</template>

<script>
	import {
	      mapState,
	      mapMutations
	  } from 'vuex'
	export default {
		components:{
			
		},
		computed:{
			...mapState(['token'])
		},
		data() {
			return {
				show: false,
				performanceList:[
					{name:'个人订单数',count:0},
					{name:'个人业绩',count:0},
					{name:'个人市场订单数',count:0},
					{name:'个人市场业绩',count:0}
				],
				peopleCountArr:[
					{name:'市场总人数',count:0},
					{name:'本月市场新人',count:0},
					{name:'本月新经销商',count:0},
					{name:'新经销商本月业绩',count:0},
				],
				orderListTotal:[
					{
						date:'2020-11',
						showList:[
							{name:'个人订单',count:0},
							{name:'个人业绩',count:0},
							/* {name:'第一市场订单',count:0},
							{name:'第一市场业绩',count:0},
							{name:'第二市场订单',count:0},
							{name:'第二市场业绩',count:0},
							{name:'第三市场订单',count:0},
							{name:'第三市场业绩',count:0}, */
							{name:'市场总业绩',count:0}
						]
					},
					{
						date:'2020-10',
						showList:[
							{name:'个人订单',count:0},
							{name:'个人业绩',count:0},
							/* {name:'第一市场订单',count:0},
							{name:'第一市场业绩',count:0},
							{name:'第二市场订单',count:0},
							{name:'第二市场业绩',count:0},
							{name:'第三市场订单',count:0},
							{name:'第三市场业绩',count:0}, */
							{name:'市场总业绩',count:0}
						]
					},
					{
						date:'2020-9',
						showList:[
							{name:'个人订单',count:0},
							{name:'个人业绩',count:0},
							/* {name:'第一市场订单',count:0},
							{name:'第一市场业绩',count:0},
							{name:'第二市场订单',count:0},
							{name:'第二市场业绩',count:0},
							{name:'第三市场订单',count:0},
							{name:'第三市场业绩',count:0}, */
							{name:'市场总业绩',count:0}
						]
					}
				],
				current:0,
			}
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest','setCode','setChatMsgNum']),
			changeSwiperCurrent(e){
				this.current=e.detail.current
			},
			goPage(page){
				uni.navigateTo({
					url:page,
					fail(err) {
						console.log(err)
					}
				})
			},
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login/login'
				})
			}
		},
		onLoad() {
			
		},
		onShow() {
			//uni.hideTabBar()
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
		},
		onTabItemTap(obj){
			//console.log(obj)
		},
		mounted() {
			
		}
	}
</script>

<style >
	.login-clue{
		height: 80px;
		font-size: 14px;
		color: #000000;/*https://products.ls.graphics/mesh-gradients/images/01.-Royal-Heath.jpg*/
		position: relative;
		background-color: transpaarent;
		z-index: 10;
	}
	.login-clue-placeholder{
		height: 80px;
		background-color: #e4475a;
	}
	.login-clue::after{
		position: absolute;
		content: '';
		width: 120vw;
		height: 120px;
		top: -40px;
		left: -10vw;
		background-image: url('https://products.ls.graphics/mesh-gradients/images/01.-Royal-Heath.jpg');
		background-size:100%;
		filter: blur(1px);
		z-index: -1;
	}
	.property{
		margin-top: 0;
		font-size: 28rpx;
		color: #f6e213;
		padding: 20rpx 0;
		background-color: #e4475a;
	}
	.property-income-number,
	.property-total-number{
		margin-top: 10rpx;
	}
	.performance,
	.people-count{
		font-size: 32rpx;
		font-weight: bold;
	}
	.performance-content-swiper-item,
	.people-count-cotent-item-detail{
		font-size: 24rpx;
	}
	.performance-content-swiper-item{
		height: 140rpx;
	}
	.performance-title,
	.people-count-title,
	.order-total-title,
	.performance-balance,
	.market-manage{
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		padding: 10rpx 0 10rpx 10px;
		border-bottom: 2rpx solid #dddddd;
	}
	.order-total-title{
		border-bottom: none;
	}
	.performance-balance,
	.market-manage{
		padding: 20rpx;
		font-weight: normal;
		justify-content: space-between;
	}
	.performance-content{
		height: 140rpx;
		font-size: 24rpx;
		border-bottom: 2rpx solid #dddddd;
	}
	.people-count{
		padding: 10rpx 0;
		border-bottom: 2rpx solid #dddddd;
	}
	.people-count-cotent-item{
		padding: 20rpx;
		margin-top: 10rpx;
		box-sizing: border-box;
	}
	.people-count-cotent-item-img{
		width: 20vw;
		height: auto;
		border-radius: 2vw;
	}
	.order-total{
		background-color: #fff;
	}
	.order-total-content-item-title{
		background-color: #eeeeee;
		font-size: 30rpx;
		padding: 10rpx 0 10rpx 10px;
	}
	.order-total-content-item-content{
		box-sizing: border-box;
		padding: 12rpx 20rpx;
		overflow: hidden;
	}
	.order-total-content-item-content:nth-child(2n+1){
		background-color: #f8f8f8;
	}
	.performance-balance-img,
	.market-manage-img{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 50%;
		right: 40rpx;
		transform: translateY(-50%);
	}
</style>
